
<template>
    <div class="guide">
        <Dao size="50px" :strokeWidth="30" :flag="false" :time="20" :onEnd="()=>gotopage('/index')"></Dao>
        <div class="swiperbox">
            <van-swipe @change="changeIndex" class="my-swipe" :autoplay="3000" indicator-color="white">
                <!-- <van-swipe-item v-for="(item,index) in imgs" :key="index">
                    <img :src="item" class="swipe-img" alt="">
                </van-swipe-item> -->
                <van-swipe-item v-for="(item,index) in list" :key="index">
                    <img :src="item.banners[0]" class="swipe-img" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="btns" v-if="currentIndex==imgs.length-1">
            <van-button block round type="success" @click="gotopage('/index')">开启购物之旅</van-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import img1 from '../assets/images/img1.jpg'
import img2 from '../assets/images/img2.jpg' 
import img3 from '../assets/images/img3.jpg' 
import img4 from '../assets/images/img4.jpg' 
import { useCommonHook } from '../hooks/index.js' 
import { getBannerApi } from '../api/api'

const{
    gotopage
} = useCommonHook()

const list = ref([])
const imgs = ref([
    img1,
    img2,
    img3,
    img4
])

const getData = ()=>{
    getBannerApi()
    .then(res=>{
        console.log(res);
        list.value = res.data.slice(0,4);
    })
    .catch(err=>{

    })
}

const currentIndex = ref(0)

const changeIndex = (index)=>{

    currentIndex.value = index;
}

onMounted(()=>{
    getData()
})
</script>

<style scoped lang="scss">
.guide{
    width:100%;
    height:100%;
    .my-swipe{
        width:100%;
        height:70%;
        .swipe-img{
            width:100%;
            height:540px;
        }
    }

    .btns{
        width:60%;
        margin:50px auto;
    }
}
</style>